<script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue';
import { Warning, DocumentCopy, CircleCheckFilled, CircleCloseFilled, Clock } from '@element-plus/icons-vue';
import { timeAgo, math18x, txTips, sortFieldMatch, isContract, subAddress, abiContract } from '@/utils/util';
import Copypage from '@/components/table/copypage.vue'
import { useRouter } from 'vue-router';
import SearchView from '@/components/SearchView.vue'

const { proxy } = getCurrentInstance()
const router = useRouter()

const activeName = ref('Overview')
const loadingtx = ref(true)
const item = ref(null)
const txList = ref([])
const transferList = ref([])
const newBlock = ref(null)

const TokensTransferredList = computed(() => {
    if (item.value.TokensTransferred.length > 0) {
        item.value.TokensTransferred.map(element => {
            abiContract(element.Contract, 'name').then(res => {
                element.name = res || ''
            })
            abiContract(element.Contract, 'symbol').then(res => {
                element.symbol = res || ''
            })
            abiContract(element.Contract, 'decimals').then(res => {
                element.decimals = res || ''
            })
            return element
        })
        return item.value.TokensTransferred
    } else {
        return []
    }
})

const transferListAdd = computed(() => {
    let add = 0;
    transferList.value.forEach(element => {
        add += +element.value
    });
    return math18x(add)
})

onMounted(() => {
    getTransactions();
})

const getTransactions = () => {
    var url = "/api/Scan/Transaction"
    var param = {
        "hash": router.currentRoute.value.params.id
    }

    proxy.$axios.post(url, param).then((res) => {
        // console.log(res)
        setTimeout(() => {
            loadingtx.value = false
        }, 500)
        if (res.code == 200) {
            item.value = res.data;

            // txList.value = 
            let arr = [];
            Object.keys(res.data).map((items, i) => {
                // console.log(items, i)
                // txList.value = arr;
                if (i < 10) {
                    arr.push({ name: items, value: res.data[items], tips: txTips[i] || '' })
                    // return 
                }
            });
            txList.value = arr
            getBlocks();
            if (isContract(res.data.To)) {
                getTransferList()
            }

            console.log('txList--')
            console.log(txList.value)
        }
    })
}

const getBlocks = () => {
    let url = "/api/Scan/Blocks"
    let param = {
        "pageNo": 1,
        "pageSize": 1
    };
    proxy.$axios.post(url, param).then((res) => {
        if (res.code == "Success") {
            newBlock.value = res.data.totalCount
        }
    })
}

const getTransferList = () => {
    var url = "/api/Scan/GetTransferList"
    var param = {
        "hash": router.currentRoute.value.params.id
    }
    proxy.$axios.post(url, param).then((res) => {
        if (res.code == 'Success') {
            transferList.value = res.data
        }
    })
}


</script>


<template>
    <div class="block_container bg_box">

        <div class="container">
            <SearchView>
                <div class="s_tit">
                    <h3>Transaction Details</h3>
                </div>
            </SearchView>
            <div class="overview_tit">
                <span :class="activeName == 'Overview' ? 'ups' : ''" @click="activeName = 'Overview'">Overview</span>
                <span :class="activeName == 'Logs' ? 'ups' : ''" v-if="item && item.Logs.length > 0"
                    @click="activeName = 'Logs'">Logs ({{ item.Logs.length
                    }})</span>
            </div>

            <div class="bolck_table boxsh">
                <el-skeleton :rows="15" :loading="loadingtx" animated>
                    <ul v-if="item && activeName == 'Overview'">
                        <li v-for="(items, i) in txList" :key="items.name">
                            <el-row>
                                <el-col :md="6">
                                    <p class="name_p">
                                        <el-popover placement="top-start" trigger="hover" :width="300"
                                            :content="items.tips">
                                            <template #reference>
                                                <img class="que" src="../../assets/img/que.png" alt="" />
                                            </template>
                                        </el-popover>
                                        <span>{{
                                            items.name == 'GasLimit' ? 'Gas Limit & Usage by Txn' :
                                            sortFieldMatch(items.name)
                                        }}</span>
                                    </p>
                                </el-col>
                                <el-col :md="18">
                                    <template v-if="items.name === 'TransactionHash'">
                                        <Copypage :id="items.value" :type="1" />
                                    </template>
                                    <template v-if="items.name === 'Status'">
                                        <div v-if="items.value == '1'" class="tx_status tx_success">
                                            <el-icon size="14px" color="#2272FF">
                                                <CircleCheckFilled />
                                            </el-icon>
                                            <p>Success</p>
                                        </div>
                                        <div class="tx_status tx_error" v-else>
                                            <el-icon color="#ff4343">
                                                <CircleCloseFilled />
                                            </el-icon>
                                            <p>Error</p>
                                        </div>
                                    </template>
                                    <template v-if="items.name === 'Block'">
                                        <div class="tx_Block">
                                            <!-- Status -->
                                            <el-icon v-if="item.Status == '1'" size="16px" color="#2272FF">
                                                <CircleCheckFilled />
                                            </el-icon>
                                            <router-link :to="'/Block/' + items.value">{{ items.value }}</router-link>
                                            <span v-if="newBlock" class="block_icon">{{ newBlock - items.value }} Block
                                                Confirmation</span>
                                        </div>
                                    </template>
                                    <template v-if="items.name === 'Timestamp'">
                                        <p class="flex_ai"><el-icon>
                                                <Clock />
                                            </el-icon> {{ timeAgo(items.value * 1000) }} ( {{ new
                                                Date(items.value * 1000).toUTCString() }} )</p>
                                    </template>
                                    <template v-if="items.name === 'From'">
                                        <Copypage :id="items.value" :type="2" :show="true" />
                                    </template>
                                    <template v-if="items.name === 'To'">
                                        <p>
                                            <span v-if="isContract(items.value)">Contract</span>
                                            <Copypage :id="items.value" :type="2" :show="true" />
                                        </p>
                                        <div v-if="transferList && transferList.length > 0" class="p_samll">

                                            <div v-for="(element, i) in transferList" :key="i">
                                                <div class="tx_to">
                                                    <img src="../../assets/img/shape-1.svg" width="8">
                                                    <i>TRANSFER </i>
                                                    <span>{{ math18x(element.value) }} TOK &nbsp;&nbsp;</span>
                                                    <i>From&nbsp;&nbsp;</i>
                                                    <router-link v-if="element.from" :to="'/address/' + element.from">{{
                                                        subAddress(element.from) }}</router-link>
                                                    <i>&nbsp;&nbsp;To → &nbsp;</i>
                                                    <router-link v-if="element.to" :to="'/address/' + element.to">{{
                                                        subAddress(element.to) }}</router-link>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="p_samll" v-if="item.Error">
                                            <img src="../../assets/img/shape-1.svg" width="8">
                                            <span class="red">Warning! Error encountered during <i
                                                    v-if="isContract(items.value)">contract</i>
                                                execution [{{ item.Error }}]</span>
                                        </p>
                                    </template>

                                    <template v-if="items.name === 'TokensTransferred' && TokensTransferredList.length > 0">
                                        <div class="" v-for="(element, i) in TokensTransferredList">
                                            <!-- <img src="../../assets/img/shape-1.svg" width="8"> -->
                                            <i class="c999">▶&nbsp;&nbsp;</i><b> From</b>&nbsp;&nbsp;<router-link
                                                :to="'/address/' + element.From">{{ subAddress(element.From)
                                                }}</router-link>
                                            <b>&nbsp;&nbsp;&nbsp;To&nbsp;&nbsp;&nbsp;</b><router-link
                                                :to="'/address/' + element.To">{{ subAddress(element.To) }}</router-link>
                                            <b>&nbsp;&nbsp;&nbsp; For
                                                &nbsp;&nbsp;</b>{{ math18x(element.Value, element.decimals)
                                                }}&nbsp;&nbsp;<i>{{ element.symbol }}</i><i class="c999">&nbsp;&nbsp;</i>
                                            <router-link :to="'/address/' + element.Contract">{{ element.name
                                            }}</router-link>
                                        </div>
                                    </template>

                                    <template v-if="items.name === 'Value'">
                                        <div>
                                            <p v-if="transferList.length > 0">{{ transferListAdd }} TOK</p>
                                            <p v-else>{{ math18x(items.value) }} TOK</p>
                                        </div>
                                    </template>

                                    <template v-if="items.name === 'TransactionFee'">
                                        <p>{{ math18x(items.value) }} TOK</p>
                                    </template>

                                    <template v-if="items.name === 'GasPrice'">
                                        <p>Gwei{{ math18x(items.value) }} <span class="c999">( {{ math18x(items.value) *
                                            Math.pow(10, 9)
                                        }} TOK )</span></p>
                                    </template>




                                </el-col>
                            </el-row>
                        </li>
                        <li>
                            <el-row>
                                <el-col :md="6">
                                    <p class="name_p">
                                        <el-popover placement="top-start" trigger="hover" :width="300"
                                            :content="txTips[10]">
                                            <template #reference>
                                                <img class="que" src="../../assets/img/que.png" alt="" />
                                            </template>
                                        </el-popover>
                                        <span>Gas Limit & Usage by Txn</span>
                                    </p>
                                </el-col>

                                <el-col :md="18">
                                    <div>
                                        <p>{{ item.GasLimit }} | {{ item.GasUsedbyTransaction }}
                                            <span v-if="item.GasLimit && item.GasUsedbyTransaction">({{
                                                ((item.GasUsedbyTransaction / item.GasLimit) * 100).toFixed(2) }}%)</span>
                                        </p>
                                    </div>
                                </el-col>
                            </el-row>
                        </li>
                        <li>
                            <el-row>
                                <el-col :md="6">
                                    <p class="name_p">
                                        <el-popover placement="top-start" trigger="hover" :width="300"
                                            :content="txTips[11]">
                                            <template #reference>
                                                <img class="que" src="../../assets/img/que.png" alt="" />
                                            </template>
                                        </el-popover>
                                        <span>Gas Fees</span>
                                    </p>
                                </el-col>

                                <el-col :md="18">
                                    <div>
                                        <span><i class="c999">Base:</i> {{ math18x(item.BaseFeePer_Gas) }} TOK</span>
                                        <i class="c999">&nbsp;&nbsp;|&nbsp;&nbsp;</i>
                                        <span><i class="c999">Max:</i> {{ math18x(item.MaxFeePerGas) }} TOK</span>
                                        <i class="c999">&nbsp;&nbsp;|&nbsp;&nbsp;</i>
                                        <span><i class="c999">Max Priority:</i> {{ math18x(item.MaxPriorityFeePerGas) }}
                                            TOK</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </li>
                        <li>
                            <el-row>
                                <el-col :md="6">
                                    <p class="name_p">
                                        <el-popover placement="top-start" trigger="hover" :width="300"
                                            :content="txTips[12]">
                                            <template #reference>
                                                <img class="que" src="../../assets/img/que.png" alt="" />
                                            </template>
                                        </el-popover>
                                        <span>Burnt & Txn Savings Fees</span>
                                    </p>
                                </el-col>

                                <el-col :md="18">
                                    <div>
                                        <el-tag>🔥Burnt: {{ math18x(item.BurntFees) }} TOK</el-tag>&nbsp;&nbsp;
                                        <el-tag type="warning">💸Txn Savings: {{ math18x(item.TxnSavings) }}TOK</el-tag>
                                    </div>
                                </el-col>
                            </el-row>
                        </li>
                        <li>
                            <el-row>
                                <el-col :md="6">
                                    <p class="name_p">
                                        <el-popover placement="top-start" trigger="hover" :width="300"
                                            :content="txTips[13]">
                                            <template #reference>
                                                <img class="que" src="../../assets/img/que.png" alt="" />
                                            </template>
                                        </el-popover>
                                        <span>Others</span>
                                    </p>
                                </el-col>

                                <el-col :md="18">
                                    <div>
                                        <el-tag type="info">Txn Type: {{ item.TxnType }}</el-tag>&nbsp;&nbsp;
                                        <el-tag type="info">Nonce: {{ item.Nonce }}</el-tag>&nbsp;&nbsp;
                                        <el-tag type="info">Position: {{ item.Position }}</el-tag>&nbsp;&nbsp;
                                    </div>
                                </el-col>
                            </el-row>
                        </li>
                        <li>
                            <el-row>
                                <el-col :md="6">
                                    <p class="name_p">
                                        <el-popover placement="top-start" trigger="hover" :width="300"
                                            :content="txTips[14]">
                                            <template #reference>
                                                <img class="que" src="../../assets/img/que.png" alt="" />
                                            </template>
                                        </el-popover>
                                        <span>Input Data</span>
                                    </p>
                                </el-col>

                                <el-col :md="18">
                                    <div v-if="item.InputData">
                                        <el-input v-if="!item.InputData.IsDetail" disabled type="textarea"
                                            :autosize="{ minRows: 2, maxRows: 12 }" v-model="item.InputData.SourceInput">
                                        </el-input>
                                        <el-input style="margin-top:5px;color:#999 !important"
                                            v-if="item.InputData.IsDetail" disabled type="textarea"
                                            :autosize="{ minRows: 6, maxRows: 12 }"
                                            :value="item.InputData.View.Fun + '\n\n' + 'MethodID:' + item.InputData.View.MethodID + '\n' + args">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                        </li>
                    </ul>
                    <div v-if="item && activeName == 'Logs'" class="logs_box">
                        <p>Transaction Receipt Event Logs</p>
                        <dl v-for="(items, i) in item.Logs" :key="i">
                            <dt>{{ items.LogIndex }}</dt>
                            <dd>
                                <el-row>
                                    <el-col :md="2">
                                        <p class="bold">Address</p>

                                    </el-col>
                                    <el-col :md="22">
                                        <Copypage :id="items.Address" :type="2" :show="true" />
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :md="2">Name</el-col>
                                    <el-col :md="22">{{ items.Name }}</el-col>
                                </el-row>
                                <el-row>
                                    <el-col :md="2">Topics</el-col>
                                    <el-col :md="22">
                                        <p class="topics" v-for="(itemsx, ix) in items.Topics" :key="ix">
                                            <el-tag type="info">{{ ix }}</el-tag>
                                            <i>{{ itemsx }}</i>

                                        </p>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :md="2">Data</el-col>
                                    <el-col :md="22">
                                        <el-input disabled type="textarea" :autosize="{ minRows: 2, maxRows: 12 }"
                                            v-model="items.Data">
                                        </el-input>
                                    </el-col>
                                </el-row>
                            </dd>
                        </dl>
                    </div>
                </el-skeleton>
            </div>


        </div>
    </div>
</template>


<style lang="less" scoped>
.block_container {
    padding-bottom: 5rem;

    .bolck_table {
        ul {
            li {

                &:nth-of-type(13),
                &:nth-of-type(10),
                &:nth-of-type(7),
                &:nth-of-type(4),
                &:nth-of-type(6) {
                    border-bottom: 1px solid var(--color-border);
                    padding-bottom: 20px;
                    margin-bottom: 15px;
                }

            }
        }
    }

    .logs_box {


        dl {
            display: flex;
            margin-top: 30px;

            dt {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-right: 20px;
                margin-top: 10px;
                text-align: center;
                line-height: 40px;
                float: left;
                background: rgba(0, 201, 167, .1);
                color: #00c9a7;
            }

            dd {
                flex: auto;
                font-size: 0.85rem;
                width: calc(100% - 60px);

                .el-row {
                    margin: 10px 0;

                    .topics {
                        word-wrap: break-word;
                        display: flex;
                        align-items: center;

                        span {
                            flex: 0 0 30px;
                            width: 30px;
                            height: 30px;
                            margin: 5px 5px 5px 0;
                            padding: 0;
                        }

                        i {
                            flex: auto;
                            width: calc(100% - 30px);
                        }
                    }

                    .el-textarea {
                        font-size: 0.75rem;
                        color: var(--color-text) !important;
                    }
                }
            }
        }
    }
}
</style>
